<script setup lang="ts">
  import { asideMenu } from '@/router/menus/asideMenu';
  import { ElSubMenu, ElMenuItem } from 'element-plus';
  import { useLocale } from '@/locales/useLocale';
  import AppIcon from '@/components/common/app/AppIcon.vue';
  import { Location } from '@element-plus/icons-vue';
  import { useMobile } from '@/hooks/core/useMobile';
  import { useAppSettingStore } from '@/store/module/useAppSettingStore';
  import { computed, ref, watch } from 'vue';
  import { useRoute } from 'vue-router';
  const props = withDefaults(defineProps<{ collapse?: boolean }>(), {
    collapse: false,
  });
  const { t } = useLocale();
  const isMobile = useMobile();
  const appSettingStore = useAppSettingStore();
  const route = useRoute();
  const defaultActive = ref(route.fullPath);
  const clearUp = watch(isMobile, (value) => {
    if (value) {
      watch(
        () => route.fullPath,
        (value) => {
          if (appSettingStore.getMobileMenuOpen) {
            appSettingStore.configMenu.mobileMenuOpen = false;
            defaultActive.value = value;
          }
        }
      );
      watch(
        () => appSettingStore.configMenu.mobileMenuOpen,
        (value) => {
          if (value) {
            defaultActive.value = route.fullPath;
          }
        }
      );
    } else {
      clearUp && clearUp();
    }
  });
</script>

<template>
  <el-menu
    mode="vertical"
    router
    :collapse="collapse"
    unique-opened
    :default-active="isMobile ? defaultActive : $route.fullPath"
    class="menu justify-end !border-none flex-1"
    :class="{ 'w-56': !collapse }"
  >
    <Component
      v-for="sub in asideMenu"
      :index="sub.index"
      :key="sub.index"
      :is="sub.children ? ElSubMenu : ElMenuItem"
      class="menu-item-aside"
    >
      <template #default v-if="!sub.children">
        <el-icon><AppIcon :icon="sub.icon" /></el-icon>

        <span class="lg:text-[1.03rem]">{{ t(sub.title) }}</span>
      </template>
      <template #title v-if="sub.children">
        <el-icon><AppIcon :icon="sub.icon" /></el-icon>
        <span class="lg:text-[1.03rem]">{{ t(sub.title) }}</span>
      </template>
      <template v-if="sub.children">
        <el-menu-item
          class="menu-item-aside"
          v-for="item in sub.children"
          :key="item.index"
          :index="item.index"
        >
          <span class="lg:text-[1.03rem]">{{ t(item.title) }}</span>
        </el-menu-item>
      </template>
    </Component>
  </el-menu>
</template>

<style lang="scss">
  ul.el-menu {
    @apply dark:bg-header-bg-dark;
  }
  .menu {
    .menu-item-aside {
      @apply text-menu-text
        dark:text-menu-text-dark
        dark:hover:bg-menu-hover-dark
        lg:border-none;

      .el-sub-menu__title {
        @apply text-menu-text
          dark:text-menu-text-dark
          dark:hover:bg-menu-hover-dark
          border-b border-border-b
          dark:border-border-b-dark
          lg:border-none;
      }
    }
    & > .el-menu-item.menu-item-aside {
      @apply border-b border-border-b
        dark:border-border-b-dark
        lg:border-none;
    }
    & > .el-menu-item.menu-item-aside.is-active {
      @apply text-menu-active-text
        dark:text-menu-active-text-dark
        border-b border-menu-active-text
        dark:border-menu-active-text-dark
        lg:border-none;
    }
    .is-active {
      @apply text-menu-active-text dark:text-menu-active-text-dark;
    }
    .el-sub-menu.is-active .el-sub-menu__title {
      @apply text-menu-active-text
        dark:text-menu-active-text-dark
        border-b border-menu-active-text
        dark:border-menu-active-text-dark
        lg:border-none;
    }
  }
</style>
